<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城购物</title>
    <script src="./02.js"></script>
    <link rel="stylesheet" href="./parchase.css">
</head>

<body>
    <div class="container">
        <table cellspacing="0">
            <thead>
                <tr>
                    <td>&emsp;<input type="checkbox">&nbsp;全选</td>
                    <td>商品名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>

            </tbody>

        </table>
        <div class="formFoot">
            <button id="shopping" type="button">继续购物</button><span id="totalG">&ensp;共<span>0</span>件商品</span><span id="selectedG">, 已选择<span>0</span>件</span>
            <div>合计：<span id="countMoney">0</span>元<button id="payMoney" type="button">去结算</button></div>
        </div>


        <div class="goodsList">

            <div class="gtitle">
                <div></div>
                <h2>买购物车中商品的人还买了</h2>
                <div></div>
            </div>

            <div class="gbox"></div>
        </div>
    </div>
    <script>
        var tbody = document.querySelector('tbody'),
            gboxList = document.querySelector('.gbox'),

            shopping = document.getElementById('shopping'),
            totalGs = document.querySelector('#totalG span'),
            selectGs = document.querySelector('#selectedG span'),
            countMoney = document.getElementById('countMoney'),
            payMoney = document.getElementById('payMoney'),
            objz = {},
            objN = {};



        if (localStorage.objs) {
            objz = JSON.parse(localStorage.objs);
            display_glist();
            if (localStorage.objM) {
                objN = JSON.parse(localStorage.objM);
                display_goods();
            } else {
                objN = {
                    N_counts: 0,
                    N_Scounts: 0,
                    N_total: 0,
                    arrz: []
                };
            }
        } else {
            objz = {
                arr: [],
                total: 0
            };
        }

        var add_carts = document.querySelectorAll('dl button[type="button"]');


        function display_glist() {
            var str_glist = '';
            for (var i = 0; i < objz.arr.length; i++) {
                str_glist += `<dl data-index="${i}">
                                    <dt>
                                        <img src="./imgs/${objz.arr[i]['img']}" alt="">
                                    </dt>
                                    <dd>
                                        <p>${objz.arr[i]['goodsName']}</p>
                                        <p>${objz.arr[i]['price']}元</p>
                                        <span>${objz.arr[i]['goodsRatings']}</span>
                                        <button type="button">加入购物车</button>
                                    </dd>
                                </dl>`;
            }
            gboxList.innerHTML = str_glist;
        }


        for (var i = 0; i < add_carts.length; i++) {
            add_carts[i].onclick = function() {
                var objk = {};
                var g_index = this.parentNode.parentNode.getAttribute('data-index');
                var flag = objN.arrz.some(function(item) {
                    return item.id == g_index;
                });
                if (flag) {
                    for (var j = 0; j < objN.arrz.length; j++) {
                        if (objN.arrz[j].id == g_index) {
                            objN.arrz[j].count++;
                            objN.arrz[j].sum = (objN.arrz[j].price * objN.arrz[j].count).toFixed(2);
                        }
                    }
                } else {
                    objk.uid = +new Date();
                    objk.id = g_index;
                    objk.path = objz.arr[g_index].img;
                    objk.name = objz.arr[g_index].goodsName;
                    objk.price = objz.arr[g_index].price;
                    objk.count = 1;
                    objk.sum = objk.price;
                    objN.arrz.push(objk);

                }
                localStorage.objM = JSON.stringify(objN);
                display_goods();
            };
        }



        function display_goods() {
            var str_goods = '';
            for (var i = 0; i < objN.arrz.length; i++) {
                str_goods += `<tr>
                            <td>
                                &emsp;<input type="checkbox">
                            </td>
                            <td>
                                <img src="./imgs/${objN.arrz[i].path}" alt="">
                                <span>${objN.arrz[i].name}</span>
                            </td>
                            <td>
                                <span>${objN.arrz[i].price}</span>元
                            </td>
                            <td>
                                <div>
                                    <button onclick="minus(${objN.arrz[i].uid})" type="button">-</button>
                                    <span class="s_count">${objN.arrz[i].count}</span>
                                    <button onclick="add(${objN.arrz[i].uid})" type="button">+</button>
                                </div>
                            </td>
                            <td>
                                <span class="s_sum">${objN.arrz[i].sum}</span>元
                            </td>
                            <td>
                                <button onclick="del(${objN.arrz[i].uid})" type="button">x</button>
                            </td>
                        </tr>`;
            }
            tbody.innerHTML = str_goods;
            display_info();


            // selectGs.innerHTML = Scount;
            // countMoney.innerHTML = sums;
        }


        //商品信息的渲染
        function display_info() {
            var per_counts = tbody.querySelectorAll('.s_count'),
                per_sums = tbody.querySelectorAll('.s_sum'),
                m_check = document.querySelector('thead input'),
                s_checks = document.querySelectorAll('tbody input');

            var Scount = 0,
                sums = 0,
                counts = 0,
                flag = true;


            for (var i = 0; i < per_counts.length; i++) {

                counts += parseInt(per_counts[i].innerHTML);
                objN.N_counts = counts;

                s_checks[i].onclick = function() {
                    flag = true;
                    Scount = 0;
                    sums = 0;
                    for (var n = 0; n < per_counts.length; n++) {
                        if (!s_checks[n].checked) {
                            flag = false;
                        } else {
                            Scount += parseInt(per_counts[n].innerHTML);
                            sums += parseFloat(per_sums[n].innerHTML);
                        }
                    }
                    m_check.checked = flag;

                    objN.N_Scounts = Scount;
                    objN.N_total = sums;
                    localStorage.objM = JSON.stringify(objN);

                    //解析
                    objN = JSON.parse(localStorage.objM);
                    totalGs.innerHTML = parseInt(objN.N_counts)
                    selectGs.innerHTML = parseInt(objN.N_Scounts)
                    countMoney.innerHTML = objN.N_total.toFixed(2);

                }
            }

            m_check.onclick = function() {
                Scount = 0;
                sums = 0;
                for (var j = 0; j < per_counts.length; j++) {
                    s_checks[j].checked = this.checked;
                }
                if (m_check.checked) {
                    for (var m = 0; m < per_counts.length; m++) {
                        Scount += parseInt(per_counts[m].innerHTML);
                        sums += parseFloat(per_sums[m].innerHTML);
                    }
                }

                objN.N_Scount = Scount;
                objN.N_total = sums;
                localStorage.objM = JSON.stringify(objN);


                //解析
                objN = JSON.parse(localStorage.objM);
                totalGs.innerHTML = parseInt(objN.N_counts)
                selectGs.innerHTML = parseInt(objN.N_Scounts)
                countMoney.innerHTML = objN.N_total.toFixed(2);

            }
        }

        function minus(id) {
            for (var i = 0; i < objN.arrz.length; i++) {
                if (id == objN.arrz[i].uid) {
                    if (objN.arrz[i].count > 0) {
                        objN.arrz[i].count--;
                        objN.arrz[i].sum = objN.arrz[i].price * objN.arrz[i].count;
                    } else {
                        objN.arrz[i].sum = 0;
                    }
                }
            }
            localStorage.objM = JSON.stringify(objN);
            display_goods();
        }


        function add(id) {
            for (var i = 0; i < objN.arrz.length; i++) {
                if (id == objN.arrz[i].uid) {
                    objN.arrz[i].count++;
                    objN.arrz[i].sum = objN.arrz[i].price * objN.arrz[i].count;
                }
            }
            localStorage.objM = JSON.stringify(objN);
            display_goods();
        }

        function del(id) {
            var per_counts = tbody.querySelectorAll('.s_count');
            for (var i = 0; i < objN.arrz.length; i++) {
                if (id == objN.arrz[i].uid) {
                    objN.arrz.splice(i, 1);
                }
            }
            localStorage.objM = JSON.stringify(objN);
            display_goods();
        }
    </script>
</body>

</html>